<template>
    <div>
        <div class="search">
            <input class="search-input" v-model="keyword" type="text" placeholder="输入城市名或拼音">
        </div>
        <div class="content-search" ref="search" v-show="keyword">
            <ul>
                <li class="search-item border-bottom" v-for="item of list" :key="item.id">{{item.name}}</li>
                <li class="search-item border-bottom" v-show="hasnoData">没有找到匹配数据</li>
            </ul>
        </div>
    </div>
</template>

<script>
import Bscroll from 'better-scroll';
export default {
    name : 'CitySearch',
    props : {
        cities : Object
    },
    data() {
        return {
            list : [],
            keyword : '',
            timer : null
        }
    },
    watch: {
        keyword () {
            if(this.timer) {
                clearTimeout (this.timer)
            }
            this.timer=setTimeout (()=>{
                if ( !this.keyword ) {
                    this.list = []
                    return
                }
                const result = []
                for (let i in this.cities) {
                    this.cities[i].forEach ( ( item )=>{
                       if(item.spell.indexOf(this.keyword) > -1||item.name.indexOf(this.keyword) > -1){
                           result.push ( item )
                       }
                    })
                }
                this.list = result
            },100)
        }
    },
    mounted() {
        this.scroll = new Bscroll (this.$refs.search)
    },
    computed: {
        hasnoData () {
            return !this.list.length
        }
    },
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl';
   .search
       height : .72rem
       background : $bgColor
       padding : .05rem .1rem
       .search-input
           box-sizing : border-box
           width : 100%
           height : .62rem
           padding : 0 .1rem
           line-height : .62rem
           text-align : center
           color : #666666
           border-radius : .06rem
           font-weight : 550 
    .content-search
        position : absolute
        top : 1.62rem
        left : 0
        right : 0
        bottom : 0
        background : #eee
        z-index : 1
        overflow : hidden
        .search-item
            line-height : .72rem
            color : #666666
            padding-left : .2rem
            background : #fff
</style>

